<template>
	<div>
		<el-tree
			v-loading="loading"
			element-loading-text="加载中"
			element-loading-spinner="el-icon-loading"
			element-loading-background="#353e4f"
			:data="overviewNavigate"
			node-key="id"
			highlight-current
			check-on-click-node
			default-expand-all
			:expand-on-click-node="false">
			<div class="custom-tree-node" :class="data.id === currentNodeKey?'active':''" slot-scope="{ node, data }">
				<div :class="data.isLeaf ? 'tree-node-label leaf-node':'tree-node-label'" @click="handleOverviewClick(node)">
					<span>{{ node.data.label }}</span>
					<!--<el-tooltip :content="node.data.label" placement="bottom-end">
						<span>{{ node.data.label }}</span>
					</el-tooltip>-->
				</div>
				<el-popover
					popper-class="popover-scale"
					placement="top"
					trigger="hover">
					<div>
						<el-button size="mini" type="primary" class="btn-scale" @click="handleRenameOpen(node, data)">重命名</el-button>
						<el-button size="mini" type="danger" class="btn-scale" @click="handleDeleteOpen(node, data)">删除</el-button>
					</div>
					<div slot="reference"><i class="el-icon-more"></i></div>
				</el-popover>
			</div>
		</el-tree>
		<div class="btn-content">
			<el-button type="primary" round size="mini" @click="handleCreateOpen">新建</el-button>
		</div>
		<el-dialog
			class="rename-dialog"
			title="重命名"
			:modal="false"
			:visible.sync="renameVisible"
			width="30%">
			<div>
				<el-form ref="renameForm" :model="renameForm" :rules="renameRules" label-width="80px" size="mini">
					<el-form-item :label="renameLabel" prop="name">
						<el-input v-model="renameForm.name"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
                <el-button @click="renameVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleRenameConfirm" size="mini">确 定</el-button>
            </span>
		</el-dialog>
		<el-dialog
			class="create-dialog"
			:title="createDialog.title"
			:modal="false"
			:visible.sync="createDialog.visible"
			width="30%">
			<div>
				<el-form ref="createForm" :model="createForm" :rules="createRules" label-width="80px" size="mini">
					<el-form-item label="新建类型" prop="type">
						<el-radio-group v-model="createForm.type">
							<el-radio :label="2">创建分组</el-radio>
							<el-radio :label="1">创建概览</el-radio>
						</el-radio-group>
					</el-form-item>
					<div v-if="createForm.type === 1">
						<el-form-item label="概览名称" prop="overviewName">
							<el-input v-model="createForm.overviewName"></el-input>
						</el-form-item>
						<el-form-item label="概览分组" prop="overview_group_id">
							<el-select v-model="createForm.overview_group_id" filterable placeholder="请选择">
								<el-option
									v-for="item in groupList"
									:key="item.id"
									:label="item.overviewGroupName"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
					<div v-else>
						<el-form-item label="分组名称" prop="overviewGroupName">
							<el-input v-model="createForm.overviewGroupName"></el-input>
						</el-form-item>
						<el-form-item label="组内概览" prop="overviewIdList">
							<el-select v-model="createForm.overviewIdList" filterable clearable multiple placeholder="请选择">
								<el-option
									v-for="item in overviewList"
									:key="item.id"
									:label="item.overviewName"
									:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</div>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
                <el-button @click="createDialog.visible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="handleCreateConfirm" size="mini">确 定</el-button>
            </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: "gridTree",
		data() {
			return {
				loading: false,
				renameVisible: false,
				renameForm: {
					name: "",
				},
				renameLabel: "分组名称",
				node: null,
				renameRules: {
					name: [
						{required: true, message: "名称不能为空", trigger: "blur"}
					]
				},
				createDialog: {
					title: "",
					visible: false,
				},
				createForm: {
					type: 2,
					overviewName: "",
					overview_group_id: "",
					overviewGroupName: "",
					overviewIdList: []
				},
				createRules: {
					name: [
						{required: true, message: "名称不能为空", trigger: "blur"}
					]
				},
				count: 0,               // 用于判断是否第一次加载
				currentNodeKey: null,   // 用于highlight，选中节点
				overviewNavigate: [],   // 概览导航
				groupList: [],          // 概览分组list
				overviewList: []        // 概览list
			}
		},
		computed: {
			appItem() {
				return this.$store.state.global.appItem;
			}
		},
		props: {
			overviewGroupType: {
				type: Number
			}
		},
		watch: {
			overviewGroupType(val) {
				console.log("overviewGroupType", val)
			},
			appItem: {
				handler() {
					console.log("appItem")
					this.count = 0;
					this.currentNodeKey = null;
					this.$store.commit("SET_OVERVIEW_ITEM", null);
					this.handleOverviewNavigate();
				},
				deep: true,
				immediate: true
			},
			$route: {
				handler(val) {
					console.log(val, "route");
					let {path} = val;
					if (path.indexOf("dataCard") === -1) {
						this.currentNodeKey = null;
					}
				},
				immediate: true
			}
		},
		created() {
		},
		methods: {
			// 概览导航
			async handleOverviewNavigate() {
				this.loading = true;
				let {path} = this.$route;
				let data = {
					appId: this.appItem.appId,
					overviewGroupType: this.overviewGroupType,
					currentPage: 1,
					pageSize: 10000
				};
				try {
					let res = await this.$analysisApi.dataCard.overviewNavigate(data);
					if (res) {
						let {overviewGroupNavigateDTOS} = res.value;
						this.overviewNavigate = overviewGroupNavigateDTOS.map(item => {
							item.label = item.overviewGroupName;
							if (item.overviewDTOList.length > 0 && this.count === 0 && path.indexOf("dataCard") > -1 && this.overviewGroupType == 0) {
								this.currentNodeKey = item.overviewDTOList[0].id;
								this.$store.commit("SET_OVERVIEW_ITEM", item.overviewDTOList[0]);
								this.$router.push({
									path: `/dataAnalysis/dataCard`
								});
								this.count = 1;
							}
							item.children = item.overviewDTOList.map(overview => {
								overview.label = overview.overviewName;
								overview.isLeaf = true;
								return overview;
							});
							item.isLeaf = false;
							return item;
						});
						this.loading = false;
					}
				} catch (e) {
					this.loading = false;
				}

			},
			/*重命名*/
			handleRenameOpen(node) {
				this.node = node;
				let {level} = this.node;
				this.renameLabel = level === 1 ? "分组名称" : "概览名称";
				this.renameForm.name = node.data.label;
				this.renameVisible = true;
			},
			async handleRenameConfirm() {
				let {level} = this.node;
				let {id} = this.node.data;
				let {name} = this.renameForm;
				let data = {}, res = null;
				if (level === 1) {
					data = {
						id,
						overviewGroupName: name,
					}
					res = await this.$analysisApi.dataCard.overviewGroupUpdate(data);
				} else {
					data = {
						id,
						overviewName: name
					}
					res = await this.$analysisApi.dataCard.overviewUpdate(data);
				}
				this.renameVisible = false;

				if (res) {
					this.node.data.label = name;
					this.node.data.overviewName = name;
					this.$store.commit("SET_OVERVIEW_ITEM", this.node.data);
				}
			},
			handleDeleteOpen(node, data) {
				this.node = data;
				let txt = data.isLeaf ? "概览" : "分组";
				this.$confirm(`删除${txt}后，不可恢复。建议手动调整后再进行删除操作`, "删除", {
					confirmButtonText: "确定",
					cancelButtonText: '取消',
					type: "warning"
				}).then(() => {
					this.handleDeleteConfirm(node);
				})
			},
			async handleDeleteConfirm(node) {
				let {level} = node;
				let {id} = node.data;
				let res = null;
				if (level === 1) {
					res = await this.$analysisApi.dataCard.overviewGroupDelete({
						id
					});
				} else {
					res = await this.$analysisApi.dataCard.overviewDelete({
						id
					});
				}
				if (res) {
					const parent = node.parent;
					const children = parent.childNodes;
					const index = children.findIndex(d => {
						return d.data.id === id;
					});
					children.splice(index, 1);
				}
			},
			/*新建*/
			handleCreateOpen() {
				this.createDialog.title = this.overviewGroupType === 0 ? "新建公共概览/分组" : "新建我的概览/分组";
				// 重置表单
				this.createForm = {
					type: 2,
					overviewName: "",
					overview_group_id: "",
					overviewGroupName: "",
					overviewIdList: []
				}

				this.createDialog.visible = true;
				this.handleQueryOverviewGroupList();
				this.handleQueryOverviewList();
			},
			// 概览分组列表
			async handleQueryOverviewGroupList() {
				let data = {
					appId: this.appItem.appId,
					overviewGroupType: this.overviewGroupType,
					currentPage: 1,
					pageSize: 10000
				};
				let res = await this.$analysisApi.dataCard.overviewGroupList(data);
				if (res) {
					let {list} = res.value;
					this.groupList = list;
				}
			},
			// 查询概览列表
			async handleQueryOverviewList() {
				let data = {
					appId: this.appItem.appId,
					overviewGroupType: this.overviewGroupType,
					currentPage: 1,
					pageSize: 10000
				};
				let res = await this.$analysisApi.dataCard.overviewList(data);
				if (res) {
					this.overviewList = res.value.list;
				}
			},
			async handleCreateConfirm() {
				let {type, overviewIdList, overviewGroupName, overviewName, overview_group_id} = this.createForm;
				let data = {};
				let res;
				if (type === 1) {
					data.overviewGroupType = this.overviewGroupType;
					data.overviewName = overviewName;
					data.overview_group_id = overview_group_id;
					res = await this.$analysisApi.dataCard.overviewAdd(data);
				} else {
					data.appId = this.appItem.appId;
					data.overviewGroupType = this.overviewGroupType;
					data.overviewGroupName = overviewGroupName;
					data.overviewIdList = overviewIdList;
					res = await this.$analysisApi.dataCard.overviewGroupAdd(data);
				}
				if (res) {
					this.handleOverviewNavigate();
					this.createDialog.visible = false;
				}
			},
			// 点击概览
			handleOverviewClick(node) {
				console.log(node, "node");
				let {isLeaf} = node.data;
				if (isLeaf) {
					this.currentNodeKey = node.data.id;
					this.$store.commit("SET_OVERVIEW_ITEM", node.data);
					this.$router.push({
						path: `/dataAnalysis/dataCard`,
						// query: {
						// 	id: node.data.id
						// }
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.btn-scale {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}
</style>
<style lang="scss">
	.el-popover.popover-scale {
		padding: 7px;
		min-width: 90px;
		.el-button {
			margin: 0;
		}
	}
</style>
